<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui"></t:base>   
<style>
.listDom{
	background:#2F4056;
	color:white;
	padding: 5px;
}
.wea_box{
	border: 2px solid white;
	border-radius:5px;
	padding:5px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.dis_box{
	border-bottom: 1px solid white;
}
.m-weather-info-box{
	float: left;
	width: 50%;
	padding: 5px;
}
.stationInfo{
	position: absolute;
	top:10px;
	left:10px;
	padding:10px;
	border-radius:10px;
	width: 200px;
	background: black;
	color:white;
	filter:alpha(opacity:50);
	opacity:0.5;
}
.disInfo{
	position: absolute;
	right:10px;
	bottom:10px;
	padding:10px;
	border-radius:10px;
	width: 200px;
	height:25%;
	background: #5FB878;
	color:white;
}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oj64LwtVsuHuY7eXFX1ChVQRfZPk8rkS"></script>
<script type="text/javascript" src="webpage/cn/net/awit/ledScreen/led.js"></script>
<div class="easyui-layout" fit="true">
    <div data-options="region:'west',border:true" style="width: 400px;overflow:hidden;"><!-- overflow:hidden; -->
    	<ul id="forcastListBox">
    	</ul>
    </div>   
    <div data-options="region:'center',border:false">
    	<div id="allMap"></div>
    	<div class="stationInfo">
    		气象站数据区域块
    	</div>
    	<div class="disInfo">
    		<h1>灾害预报</h1>
    		<hr color="white">
    		<div  style="width: 100%;height: 80%;overflow: auto hidden;">
	    		<ul id="disListBox">
	    		</ul>
    		</div>
    	</div>
    </div>   
</div>
<script id="listDomTemp" type="text/html">
	<li class="listDom">
		<div class="wea_box">
			<div class="m-weather-info-box" style="width: 20%;border-right: 2px solid #AAB8D2;">
				<div style="color: #AAB8D2;font-size: 13px;text-align:center" class="num">S51</div>
				<div style="color: #AAB8D2;font-size: 12px;;text-align:center" class="time">12/17 10时</div>
			</div>
			<div class="m-weather-info-box" style="width: 20%;">
				<img src="webpage/cn/net/awit/ledScreen/weatherPng/weather-fine.png" class="wInfo" style="width:50%;"/>
			</div>
			<div class="m-weather-info-box" style="width: 17%;">
				<div style="font-size: 13px;" class="temp">123℃</div>
				<div style="font-size: 13px;" class="rh">123%</div>
			</div>
			<div class="m-weather-info-box" style="width: 17%;">
				<div style="font-size: 13px;" class="vis">123公里</div>
				<div style="font-size: 13px;" class="p">123KPa</div>
			</div>
			<div class="m-weather-info-box" style="width: 26%;">
				<div style="font-size: 13px;" class="wind">东风8级</div>
			</div>
		</div>
	</li>
</script>
<script id="disDomTemp" type="text/html">
	<li>
		<div class="dis_box">
		</div>
	</li>
</script>
<script type="text/javascript">
	$(function(){
		var t=null,t2=null;	//定时任务
		var tout=20,weather_t=2;	//定时任务频率
		var i=0,i2=0;	//左方下拉条进度
		var map = new BMap.Map("allMap");    // 创建Map实例
		map.enableScrollWheelZoom(true);
		map.centerAndZoom(new BMap.Point(106.7404174805, 26.5412371898), 12); 
		
		//加载预报点天气
		function loadWeather(isInit){
			$.ajax({
				url:"led.do?getForcast",
				type:"get",
				dataType:"json",
				success:function(data){
					if(data.code==0){
						var t=$("#listDomTemp").text();
						$("#forcastListBox").empty();
						for(var i=0;i<data.obj.data.length;i++){
							var c=$(t).clone();
							var ts=new Date();
							var wInfo=getWeatherStr(data.obj.data[i].rain,data.obj.data[i].snow,data.obj.data[i].cloud);
							var wind=getWinD(data.obj.data[i].wd,data.obj.data[i].ws)
							c.find(".num").text(data.obj.data[i].num);
							c.find(".time").text((ts.getMonth()+1)+"/"+ts.getDate()+" "+ts.getHours()+"时");
							c.find(".wInfo").attr("src","webpage/cn/net/awit/ledScreen/weatherPng/"+wInfo.src);
							c.find(".temp").text(data.obj.data[i].temp+"℃");
							c.find(".rh").text(data.obj.data[i].rh+"%");
							c.find(".vis").text(data.obj.data[i].vis+"公里");
							c.find(".p").text(data.obj.data[i].p+"KPa");
							c.find(".wind").text(wind.wd.text+'风'+wind.ws.level+'级');
							$("#forcastListBox").append(c);
						}
						if(isInit){
							autoScroll();
						}
					}
				}
			});
		}
		
		function loadForcast(data){
			map.clearOverlays();
			disArr=[];
			$.each(data,function(i,pointData){
				var point = new BMap.Point(pointData.lng, pointData.lat);
				var myCompOverlay = new ComplexCustomOverlay(point, pointData);
				map.addOverlay(myCompOverlay);
			})
			var t=$("#disDomTemp").text();
			$("#disListBox").empty();
			$.each(disArr,function(i,n){
				var c=$(t).clone();
				c.find(".dis_box").text($(n).text());
				$("#disListBox").append(c);
			});
		}
		
		function autoScroll(){
			var long2=$('#forcastListBox').parent().height();
			var long3 = $("#forcastListBox").parent()[0].scrollHeight;
			if(t==null){
				t=window.setInterval(function(){
					if(i<(long3-long2+200)){
						i++;
					}else{
						i=0;
					}
					$("#forcastListBox").parent()[0].scrollTop=i;
				}, tout);
			}else{
				window.clearInterval(t);
				t=null;
			}
			var long4=$('#disListBox').parent().height();
			var long5 = $("#disListBox").parent()[0].scrollHeight;
			if(t2==null){
				t2=window.setInterval(function(){
					if(i2<(long5-long4+1500)){
						i2++;
					}else{
						i2=0;
					}
					$("#disListBox").parent()[0].scrollTop=i2;
				}, tout);
			}
		}
		
		function loadWeatherData(){
			$.ajax({
				url:"led.do?getStationInfo",
				type:"get",
				dataType:"json",
				success:function(data){ 
					if(data.code==200){
						var stationData=data.obj.data;
						$(".stationInfo").empty();
						$.each(stationData,function(i,n){
							$.each(STATION_DATA_INFO,function(attr,demo){
								if(!demo.hidden){
									var p=document.createElement("div");
									p.innerText=demo.call(n[attr]);
									$(".stationInfo").append($(p));
								}
							});
							$(".stationInfo").append("<br/>");
						});
					}
				}
			});
		}
		
		function loadDistrat(){
			$.ajax({
				url:"led.do?getDisaster",
				type:"get",
				dataType:"json",
				success:function(data){ 
					if(data.code==0){
						loadForcast(data.obj.data);
					}
				}
			});
		}
		
		function init(){
			//预报点天气数据列表
			loadWeather(true);
			//气象数据
			loadWeatherData();
			//灾害数据
			loadDistrat();
			//定时加载预报点天气数据
			window.setInterval(function(){
				var mm=new Date();
				if(mm.getMinutes()<3){
					loadWeather(false);
					loadDistrat();
				}
				loadWeatherData();
			}, weather_t*60*1000);
			//地图预报点灾害数据
		}
		
		init();
	})
</script>